<template>
  <div>
     <div class="info">
         <van-image
       round
       fit="cover"
       width="64"
       height="64"
       :src="userInfo.photo" />
       <h2>
         {{userInfo.name}}
       <br>
       <van-tag type="success" color="#fff" text-color="#3296fa">{{userInfo.birthday}}</van-tag>
       </h2>
     </div>

        <div class="user-nav">
             <van-row >
  <van-col span="8"><van-icon name="newspaper-o" color="#7af" />我的作品</van-col>
  <van-col span="8"><van-icon name="star-o" color="#f00" />我的收藏</van-col>
  <van-col span="8"><van-icon name="tosend" color="#fa0" />阅读历史</van-col>
          </van-row>
        </div>

<van-cell-group>
 <van-cell title="编辑资料" icon="edit" is-link @click="$router.push({path:'/edit'})"/>
 <van-cell title="小智同学" icon="chat-o" is-link/>
 <van-cell title="系统设置" icon="setting-o" is-link/>
 <van-cell title="退出登入"
  icon="warning-o"
  @click="logClick"
  is-link/>
</van-cell-group>

  </div>
</template>

<script>
// 导入接口
import {getUserInfo} from './user.js'
// 导入token工具包
import {removeToken} from '../../../utils/token.js'

export default {
name:"user",
data(){
  return{
    userInfo:{}
  }
},
created(){
  // 1.请求个人详细信息
getUserInfo().then(res=>{
  console.log(res);
  //  2.绑定数据
  this.userInfo=res.data.data
})
},
methods: {
  // 退出登入
  logClick() {
    this.$dialog.confirm({
      title:'提示',
      message:'确定要退出登入吗？'
    })
    .then(()=>{
      // 用户点击确实触发
      // 清除token
      removeToken()
  // 清除userInfo
      this.userInfo={}
        // 跳转登入页
      this.$router.push({path:'/login'})
    })
    .catch(()=>{
      // 用户点击取消触发
    })
  },
},
}

</script>

<style lang="less">
.info{
  background-color: lightblue;
  display:flex;
  align-items: center;
  padding-left: 20px;
  height: 100px;
}
h2{
  font-size: 18px;
  margin-left: 15px;
  color: white;
}

.user-nav{
  padding: 15px 0;
font-size: 15px;
  text-align: center;
  font-style: 16px;
 font-weight: 600;
  .van-icon{
  display: block;
  font-size: 25px;
  padding-bottom:5px;
  }


}

</style>
